<template>
  <div id="type-page">
    <div>
      <!-- <h3>玩法种类</h3> -->
      <!-- <div class="play-type">
        <button v-for="item in typeList" :key="item" :class="playType === item ? 'action-red' : '' "
            @click="typeHandle(item)">
            选 {{ item }}
        </button>
      </div> -->
    </div>
    <div class="name-card">
      <div name="roll-animation">
        <div v-if="isRolling">
          <h3 style="margin: 18px 0 18px 0">🎉 命运转动</h3>
          <div class="name-loading"></div>
        </div>
        <div v-if="currentStudent && !isRolling">
          <h3 style="margin: 18px 0 18px 0">🎉 财富密码</h3>
          <h2 style="color: #e74c3c; margin: 18px 0 18px 0">
            {{ currentStudent }}
            <span style="color: #77a9ee">{{ blueBall }}</span>
          </h2>
        </div>
      </div>
    </div>

    <div class="controls">
      <button class="action-blue" @click="roll" :disabled="isRolling">
        {{ isRolling ? '命运转动' : '财富齿轮' }}
        <!-- <span v-if="isRolling" class="loading"></span> -->
      </button>
      <button class="action-red" @click="reset">重头再来</button>
      <button @click.self="historyVisible = true">历史记录</button>
    </div>

    <!-- 红球列表 -->
    <!-- Grid容器 -->
    <div class="grid-container">
      <!-- 遍历10个元素生成列 -->
      <div
        v-for="item in num"
        :key="item"
        :class="['grid-item', { selected: selectedList?.includes(item) }]"
      >
        {{ item }}
      </div>
    </div>
    <!-- 蓝球列表 -->
    <div class="grid-container">
      <div
        v-for="item in blueNum"
        :key="item"
        :class="[
          'grid-item',
          { 'blue-selected': selectedBule?.includes(item) }
        ]"
      >
        {{ item }}
      </div>
    </div>
  </div>

  <History
    :visible="historyVisible"
    :list="sLhistoryList"
    @close="historyVisible = false"
    :textColor="2"
  />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import History from './History.vue'
import { callBack } from '@/utils'
import axios from 'axios'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const num = ref([
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  '11',
  '12',
  '13',
  '14',
  '15',
  '16',
  '17',
  '18',
  '19',
  '20',
  '21',
  '22',
  '23',
  '24',
  '25',
  '26',
  '27',
  '28',
  '29',
  '30',
  '31',
  '32',
  '33',
  '34',
  '35'
])
const blueNum = ref([
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  '11',
  '12'
])
const typeList = ref(['单注', '复式', '胆拖'])
const currentStudent = ref(null)
const blueBall = ref(null)
const playType = ref(5)
const selectedList = ref([])
const selectedBule = ref([])
const isRolling = ref(false)
const sLhistoryList = ref(
  JSON.parse(localStorage.getItem('sLhistoryList')) || []
)
const historyVisible = ref(false)

const luckyNum = ref([])
const luckyBule = ref([])

const winData = ref({})

onMounted(() => {
  luckyNum.value = num.value
  luckyBule.value = blueNum.value

  getLuckNumber()
})

function getLuckNumber() {
  axios
    .get(
      '/super/gateway/lottery/getHistoryPageListV1.qry?gameNo=85&provinceId=0&pageSize=10&isVerify=1&pageNo=1'
    )
    .then(({ data }) => {
      if (data?.success) {
        winData.value = data?.value?.list[0]

        proxy.$dialog.show({
          title: '上期开奖结果',
          content: `
          <div style="color: red; font-size: 18px;">
            ${winData?.value?.lotteryDrawResult?.substr(0, 14)}
            <span style="color: #3498db"> 
              ${winData?.value?.lotteryDrawResult?.substr(15, 6)}
            </span>
          </div>`
        })
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
}

function roll() {
  isRolling.value = true
  currentStudent.value = null
  blueBall.value = null

  setTimeout(() => {
    // 红球选号逻辑
    let array = callBack(playType.value, luckyNum.value)
    currentStudent.value = array?.join(' ')
    selectedList.value = array

    luckyNum.value = luckyNum.value.filter((item) => {
      return !array?.includes(item)
    })

    // 蓝球选号逻辑
    let blueArray = callBack(2, luckyBule.value)

    blueBall.value = blueArray?.join(' ') || ''
    selectedBule.value = blueArray
    luckyBule.value = luckyBule.value.filter((item) => {
      return !blueArray?.includes(item)
    })

    isRolling.value = false

    // 更新localStorage中的历史记录
    sLhistoryList.value.push(`${currentStudent.value} - ${blueBall.value}`)
    localStorage.setItem('sLhistoryList', JSON.stringify(sLhistoryList.value))
  }, 800)
}
function reset() {
  selectedList.value = []
  selectedBule.value = []
  currentStudent.value = null
  blueBall.value = null
  isRolling.value = false
  // 清空历史记录
  sLhistoryList.value = []
  // 更新localStorage中的历史记录为空
  localStorage.setItem('sLhistoryList', JSON.stringify([]))
  luckyNum.value = num.value
  luckyBule.value = blueNum.value
}
function typeHandle(value) {
  playType.value = value
}
</script>

<style scoped>
@import '../assets/index.css';
</style>
